<template>
	<div class="goods" @click="$router.push('/goodsDetail?goods_id='+goods.goods_id)">
		<!-- 封面 -->
		<div class="thumb-box">
			<img class="thumb" v-img-lazy="global.MINIO_FILE_DOMAIN + goods.cover_url" />
		</div>

		<!-- 商品名称 -->
		<div class="name ellipsis" v-html="goods.goods_name"></div>

		<!-- 价格盒子 -->
		<div class="price-box">
			<!-- 价格 -->
			<div class="price">
				<span class="symbol">¥</span>
				<span class="num">{{ (goods.price/100).toFixed(2) }}</span>
			</div>

			<!-- 市场价格 -->
			<div class="market-price">
				<span>¥</span>
				<span>{{ (goods.market_price/100).toFixed(2) }}</span>
			</div>
		</div>

		<!-- 总销量 -->
		<div class="sales-num" v-if="goods.sales_num > 0">总销量 {{ goods.sales_num }}</div>
		<div class="sales-num" v-else>总销量 10000</div>
	</div>
</template>

<script setup lang="ts">
import type { GoodsItem } from "@/types/goods";
import { inject } from "vue"

// 全局属性
const global:any = inject('global')

defineProps<{
	goods: GoodsItem
}>()

// defineProps({
// 	goods: {
// 		type: Object,
// 		default: {}
// 	}
// })

</script>

<style lang="scss" scoped>
.goods {
    width: 49%;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    background-color: #fff;

	// 封面
	.thumb-box {
		text-align: center;
		.thumb {
			width: 153px;
			height: 153px;
		}
	}


	// 商品名称
	.name {
		height: 40px;
		font-size: 14px;
		margin: 10px 0;
		line-height: 20px;
	}

	// 价格盒子
	.price-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		.price {
			color: #cf4444;
			font-size: 16px;
			.symbol {
				font-size: 12px;
				padding-right: 2px;
			}
		}
		.market-price {
			color: #ccc;
			font-size: 12px;
			text-decoration: line-through;
		}
	}

	// 总销量
	.sales-num {
		color: #ccc;
		font-size: 12px;
		display: flex;
		justify-content: flex-end;
		padding-top: 4px;
	}
}
</style>